<template>
  <div class="change-pwd">
    <div class="wrap">
      <m-step class="changestep" :steps="steps" :active="active" />
    </div>

    <div class="content">
      <div class="input-area with-cover" v-if="active === 0">
        <Form
          :model="formData"
          ref="form"
          :rules="rules"
          label-position="left"
          label-width="100px"
        >
          <Row>
            <Col>
              <img
                src="~/assets/images/security-old-pwd.png"
                alt=""
                class="icon"
              />
              <form-item label="原密码：" prop="old_pwd">
                <Input
                  v-model="formData.old_pwd"
                  minlength="8"
                  type="password"
                  placeholder="请输入原密码"
                />
              </form-item>
            </Col>
          </Row>

          <Row>
            <Col>
              <img
                src="~/assets/images/security-new-pwd.png"
                alt=""
                class="icon"
              />
              <form-item label="新密码：" prop="pwd">
                <Input
                  v-model="formData.pwd"
                  minlength="8"
                  type="password"
                  placeholder="请输入新密码"
                />
              </form-item>
            </Col>
          </Row>

          <Row>
            <Col>
              <img
                src="~/assets/images/security-confirm-pwd.png"
                alt=""
                class="icon"
              />
              <form-item label="确认密码：" prop="confirm_pwd">
                <Input
                  v-model="formData.confirm_pwd"
                  minlength="8"
                  type="password"
                  placeholder="请确定密码"
                />
              </form-item>
            </Col>
          </Row>

          <Row>
            <Col :span="16">
              <img
                src="~/assets/images/security-verification-code.png"
                alt=""
                class="icon"
              />
              <form-item label="验证码：" prop="captcha">
                <Input
                  v-model="formData.captcha"
                  maxLength="4"
                  type="text"
                  placeholder="请输入验证码"
                />
              </form-item>
            </Col>
            <Col :span="8">
              <div class="yzmBox">
                <img
                  :src="ImgCaptcha"
                  class="objectCover cursor"
                  @click="imgCaptcha"
                />
              </div>
            </Col>
          </Row>

          <Row type="flex" justify="space-around">
            <Col :span="12">
              <div class="submit cursor" @click="submit">提交</div>
            </Col>
          </Row>
        </Form>
      </div>

      <div class="success" v-else-if="active === 1">
        <img src="~/assets/images/change-success.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
import { Col, Form, FormItem, Input, Row, Step, Steps } from "element-ui";
import { password } from "@/utils/validates";
import MStep from "@/components/common/m-step/MStep";
import { updatePwd, getImgCaptcha } from "@/request/api";

export default {
  name: "ChangePwd",
  components: { Step, Steps, MStep, Form, Row, Col, FormItem, Input },
  data() {
    return {
      active: 0,
      steps: [{ title: "修改密码" }, { title: "修改成功" }],
      formData: {},
      ImgCaptcha: "",
      rules: {
        password: [{ validator: password, trigger: "blur" }],
        old_pwd: [{ required: true, message: "请输入原密码", trigger: "blur" }],
        pwd: [{ required: true, message: "请输入新密码", trigger: "blur" }],
        confirm_pwd: [
          { required: true, message: "请输入确认密码", trigger: "blur" }
        ],
        captcha: [{ required: true, message: "请输入验证码", trigger: "blur" }]
      }
    };
  },
  watch: {
    "formData.captcha": function() {
      this.formData.captcha = this.formData.captcha.replace(/[\W]/g, "");
    }
  },
  created() {
    this.imgCaptcha();
  },
  methods: {
    imgCaptcha() {
      getImgCaptcha()
        .then(res => {
          this.ImgCaptcha = res.data.captcha;
          this.formData.key = res.data.key;
        })
        .catch(err => {
          this.$message.error(err.message);
        });
    },
    submit() {
      let that = this;
      this.$refs.form.validate(res => {
        if (res) {
          updatePwd(that.formData)
            .then(res => {
              if (res.status === 200) {
                that.active = 1;
              } else {
                that.formData = {};
                that.imgCaptcha();
              }
            })
            .catch(err => {
              this.$message.error(err.message);
            });
        } else {
          return
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~@/assets/style/common.scss";
@import "~@/assets/style/cover.scss";

.change-pwd {
  background-color: #fff;
  padding-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;

  .wrap {
    width: 500px;
    margin-bottom: 40px;
  }

  .content {
    margin-bottom: 120px;

    .yzmBox {
      width: 100%;
      padding-left: 10px;
      height: 40px;
    }

    .input-area {
      width: 360px;

      ///deep/ .el-form-item__label:before {
      //  display: inline;
      //  content: url("~@/assets/images/security-old-pwd.png");
      //  position: absolute;
      //  left: -10px;
      //}

      /deep/ .el-col {
        .icon {
          position: absolute;
          left: -25px;
          top: 10px;
        }
      }

      .submit {
        width: 200px;
        height: 40px;
        border-radius: 10px;
        background-color: $theme-color-1;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        margin-top: 80px;
        margin-bottom: 200px;
      }
    }

    .success {
      padding-top: 40px;
      margin-bottom: 200px;
    }
  }
}
</style>
